<template>
  <div class="shadow-card rounded-2xl bg-white p-5">
    <div class="mb-5 flex items-center justify-between">
      <h3 class="flex items-center text-lg font-semibold">
        <i class="fa fa-history text-primary mr-2"></i> 上传日志
      </h3>
      <button
        class="hover:text-primary text-xs text-gray-500 transition-colors"
        @click="() => clearLogs"
      >
        清空日志
      </button>
    </div>

    <div
      id="logContainer"
      class="bg-gray-light h-72 space-y-3 overflow-y-auto rounded-xl p-4 text-sm text-gray-700"
    >
      <div class="fade-in align-items-center flex items-start gap-3" v-for="(item, index) in logs">
        <span
          class="mt-0.5 rounded-full px-2 py-1 text-xs whitespace-nowrap"
          :class="{
            'text-primary bg-blue-100': item.type === 'success',
            'text-primary bg-red-100': item.type === 'error',
            'text-primary bg-amber-100': item.type === 'warning',
            'bg-gray-400/80 text-white': item.type === 'info',
            'text-primary bg-green-100': ['start', 'end'].includes(item.type),
          }"
          >{{ item.time }}</span
        >
        <p>{{ item.msg }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import type { LogMessage } from '../../types/index.ts'
import { watch, computed } from 'vue'

const props = defineProps({
  logs: {
    default: () => [] as LogMessage[],
  },
  clearLogs: {
    type: Function,
  },
})

const logList = computed(() => props.logs || [])
</script>

<style scoped lang="scss">
.logsBox {
  margin-top: 20px;
  font-size: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  .file-row-header {
    color: #909399;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
  }
  .file-list {
    height: 300px;
    overflow: auto;

    .file-row-item {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
    }
  }
}
</style>
